<template>
	<div v-loading="loading" class="login-div">
		<img class="logo" src="../assets/commons/logo.png" alt="" />

		<div v-if="status != 5" class="login-container">
			<div class="login-top">
				<div class="login-top-left">{{ status < 2 ? '登录' : '密码找回' }}</div>
			</div>
			<div class="login-phone">{{ status < 2 ? '请输入您的手机账户和密码登录' : status == 2 ? '请输入您的手机获取验证码' : status == 3 ? '验证码已发送，请输入查看您的手机' : status == 4 ? '请输入新的密码' : ''}}</div>
			<div v-if="status == 0 || status == 1 || status == 2" class="login-phone2">
				<div class="login-phone2-top">
					<img class="login-phone2-top-img" src="../assets/commons/icon.png" alt="">
					<div class="login-phone2-top-text">手机号</div>
				</div>
				<div class="login-phone2-bottom">
					<div class="login-phone2-bottom-left">
						+ 33
					</div>
					<input class="login-phone2-bottom-input" v-model="phone" type="text" placeholder="请输入">
					<img class="login-phone2-bottom-right" src="../assets/commons/flag_PM.png" alt="">
				</div>
			</div>

			<div v-if="status == 1 || status == 4" class="login-password"
				:class="status == 4 ? 'login-phone2' : 'login-password'">
				<div class="login-password-top">
					<img class="login-password-top-img" src="../assets/commons/password.png" alt="">
					<div class="login-password-top-text">密码</div>
				</div>
				<div class="login-password-bottom">
					<input class="login-password-bottom-input" v-model="password" type="password"
						placeholder="请输入">
					<!-- <img class="login-password-bottom-right" src="../assets/commons/eye2.png" alt=""> -->
				</div>
			</div>
			<div v-if="status == 4" class="login-password">
				<div class="login-password-top">
					<img class="login-password-top-img" src="../assets/commons/password.png" alt="">
					<div class="login-password-top-text">确认新密码</div>
				</div>
				<div class="login-password-bottom">
					<input class="login-password-bottom-input" v-model="password2" type="password"
						placeholder="请输入">
					<!-- <img class="login-password-bottom-right" src="../assets/commons/eye2.png" alt=""> -->
				</div>
			</div>

			<div v-if="status == 3" class="login-phone2">
				<div class="login-phone2-top">
					<img class="login-phone2-top-img" src="../assets/commons/secure.png" alt="">
					<div class="login-phone2-top-text">验证码</div>
				</div>
				<div class="login-phone2-bottom">
					<input class="login-phone2-bottom-input" v-model="code" maxlength="6" type="text"
						placeholder="请输入">
				</div>
			</div>
			<div v-if="status < 2" @click="submit" class="login-btn">
				确认
			</div>
			<div v-if="status == 2 || status == 3" @click="submit2" class="login-btn">
				确认
			</div>
			<div v-if="status == 4" @click="submit3" class="login-btn">
				确认
			</div>
			<div v-if="status == 1" @click="forgetPassword" class="login-bottom">
				<div class="login-bottom-right">忘记密码</div>
			</div>
		</div>

		<div v-if="status == 5" class="login-success">
			<div class="login-success-text">
				密码修改成功！
			</div>
			<img class="login-success-img" src="../assets/commons/confirm.png" alt="">

			<div class="login-success-btn" @click="showLogin">
				返回登录
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
import { useRouter } from 'vue-router' // 引入useRouter函数
const router = useRouter() // 获取router实例
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const loading = ref(false); // 控制loading效果
// 定义响应式数据用于存储用户名和密码
const username = ref('');
const password = ref('');// 密码
const password2 = ref('');// 确认密码

const phone = ref('');// 手机号
const status = ref(0); // 操作状态0只显示手机号1显示密码 2密码找回填写手机号3显示填写验证码4密码找回5密码找回成功
const code = ref('');// 验证码
// 模拟登录处理函数，这里只是简单打印，实际应用需与后端交互
const handleLogin = () => {
	console.log('用户名：', username.value);
	console.log('密码：', password.value);
};
// 登录
const submit = () => {
	console.log(888999, phone.value);
	if (!phone.value) {
		ElMessage({
			message: '请输入正确格式的手机号码！',
			type: 'warning',
		})
		return;
	}
	if (status.value === 0) {
		status.value = 1;
		return;
	}
	if (!password.value) {
		ElMessage({
			message: '请输入正确格式的密码！',
			type: 'warning',
		})
		return;
	}
	ElMessage({
		message: '登录成功！',
		type: 'success',
	})
	localStorage.setItem('token', '123456');
	const userInfo = {
		userId: '123',
		username: 'testUser',
		token: 'fake_token_123'
	}
	counterStore.saveUserInfo(userInfo)
	counterStore.saveToken(userInfo.token)
	console.log('===token===:',counterStore.getToken())
	// counterStore.deleteToken()
	// localStorage.removeItem('token');
	router.push({ name: 'Home' })
}
// 密码找回
const submit2 = () => {
	if (status.value === 2) {
		if (!phone.value) {
			ElMessage({
				message: '请输入正确格式的手机号码！',
				type: 'warning',
			})
			return;
		}
	}
	if (status.value != 3) {


		loading.value = true;
		// 模拟发送验证码
		setTimeout(() => {
			loading.value = false;
			status.value = 3;
		}, 1000);
		return
	}
	if (!code.value) {
		ElMessage({
			message: '请输入正确格式的验证码！',
			type: 'warning',
		})
		return;
	}

	status.value = 4;
	password.value = '';
}
// 确认密码
const submit3 = () => {
	if (status.value == 4) {
		if (!password.value) {
			ElMessage({
				message: '请输入正确格式的密码！',
				type: 'warning',
			})
			return;
		}
		if (password2.value != password.value) {
			ElMessage({
				message: '确认密码与密码不一致！',
				type: 'warning',
			})
			return;
		}
		loading.value = true;
		// 模拟修改密码
		setTimeout(() => {
			loading.value = false;
			// 模拟修改密码
			ElMessage({
				message: '密码修改成功！',
				type: 'success',
			})
			status.value = 5;
			password2.value = '';
			password.value = '';
			phone.value = '';
			code.value = '';
		}, 1000);
	}
}
// 忘记密码
const forgetPassword = () => {
	status.value = 2;

}
const showLogin = () => {
	status.value = 0;
}
</script>

<style scoped>
.login-success {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.login-success-text {
	/** 文本1 */
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 33.3px;
	color: rgba(253, 116, 1, 1);
}

.login-success-img {
	width: 80px;
	height: 80px;
	display: block;
	margin-top: 28px;
}

.login-success-btn {
	margin-top: 45px;
	width: 368px;
	height: 45px;
	opacity: 1;
	border-radius: 5px;
	background: #FD7401;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(255, 255, 255);
	font-family: Roboto;
	font-size: 16px;
	font-weight: 700;
}

.login-div {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.logo {
	/* Brand/logo-colored */
	position: absolute;
	width: 98px;
	height: 20px;
	left: 20px;
	top: 14px;
}

.login-container {
	width: 370px;
	box-sizing: border-box;
}

.login-top {}

.login-top-left {
	width: 125px;
	height: 35px;
	opacity: 1;
	/** 文本1 */
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 40.54px;
	color: rgba(253, 116, 1, 1);

}

.login-top-right {
	width: 30px;
	height: 30px;
	border: 3px dashed rgb(236, 240, 245);
}

.login-phone {
	/** 文本1 */
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.55px;
	line-height: 23.17px;
	color: rgba(131, 146, 171, 1);
	margin-top: 9px;
}

.login-phone input {
	width: 455px;
	padding: 0 40px;
	height: 50px;
	padding-bottom: 10px;
	color: rgb(124, 134, 154);
	font-family: Roboto;
	font-size: 16px;
	font-weight: 400;
}

.login-password {
	margin-top: 39px
}

.login-password-top {
	display: flex;
	align-items: center;
}

.login-password-top-img {
	width: 19.2px;
	height: 19.2px;
	display: block;
}

.login-password-top-text {
	margin-left: 12px;
	/** 文本1 */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 12px;
	color: rgba(79, 80, 127, 1);
}

.login-password-bottom {
	width: 370px;
	height: 45px;
	opacity: 1;
	border-radius: 5px;
	background: #E7E9EB;
	display: flex;
	align-items: center;
	margin-top: 7px;
}

.login-password-bottom-input {
	padding-left: 14px;
	/* width: 322px; */
	width: 345px;
}

.login-phone2 {
	margin-top: 120px;
}

.login-phone2-top {
	display: flex;
	align-items: center;
}

.login-phone2-top-img {
	width: 19.2px;
	height: 19.2px;
	display: block;
}

.login-phone2-top-text {
	margin-left: 12px;
	/** 文本1 */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 12px;
	color: rgba(79, 80, 127, 1);
}

.login-phone2-bottom {
	width: 370px;
	height: 45px;
	opacity: 1;
	border-radius: 5px;
	background: #E7E9EB;
	display: flex;
	align-items: center;
	margin-top: 7px;
}

.login-phone2-bottom-left {
	margin-left: 14px;
	width: 40px;
	height: 18px;
	/** 文本1 */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0px;
	line-height: 16.41px;
	color: rgba(253, 116, 1, 1);
	border-right: 1px solid #979797;
}

.login-phone2-bottom-input {
	padding-left: 10px;
	width: 252px;
}

.login-btn {
	margin-top: 38px;
	width: 368px;
	height: 45px;
	opacity: 1;
	border-radius: 5px;
	background: #FD7401;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgb(255, 255, 255);
	font-family: Roboto;
	font-size: 16px;
	font-weight: 700;
}

.login-bottom {
	display: flex;
	justify-content: flex-end;
	margin-top: 38px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: #1570EF;
}

.login-bottom-right {
	margin-right: 5px;
}
</style>